<style lang="less">
    @import '../../styles/common.less';
    @import '../tables/components/table.less';
</style>
<template>
    <div>
        <Form   style="height: 38px;">
            <FormItem   style="width: 200px;float: left;margin-right: 3px;" >
                <Select  v-model="name" placeholder="请选择类别"  style="margin-right: 3px;">
                    <Option value="user_id">用户ID</Option>
                    <Option value="aitc">AITC总数量</Option>
                    <Option value="usd">USDI数量</Option>
                    <Option value="freeze_aitc">冻结AITC数量</Option>
                    <Option value="freeze_usd">冻结USDI数量</Option>
                </Select>
            </FormItem>
            <div style="float: right">
                <Button type="info" style="float: right;margin-right: 5px" @click="load(1)">查询</Button>
            </div>

        </Form>
        <Table :loading="loading" refs="table1"  :data="Message" :columns="columnsList"></Table>
        <Page :total="pageNum" :page-size="pageSize"  style="text-align: center;margin-top: 15px;" show-total @on-page-size-change='pageSizes'  show-elevator show-sizer @on-change="pageChange"></Page>

    </div>
</template>
<script>
    import $http from '../../utils/axiosWrap'
    import canEditTable from '../tables/components/canEditTable.vue'
    export default {
        data() {
            return {
                auditorUser:'',
                auditorStatus:'',
                rank:'',
                loading: true,
                Message:[],
                admin:true,
                columnsList: [
                    {
                        title: '序号',
                        width: 80,
                        align: 'center',
                        render: (h, params) => {
                            return  params.index + (this.initPage- 1) * this.pageSize + 1
                        }
                    },
                    {
                        title: '用户名',
                        align: 'center',
                        key: 'userName'
                    },
                    {
                        title: 'AITC总量',
                        align: 'center',
                        key: 'aitc',
                        width:'auto',
                        editable: true
                    },
                    {
                        title: 'USDI总量',
                        align: 'center',
                        key: 'usd'
                    },
                    {
                        title: '冻结AITC',
                        align: 'center',
                        key: 'freezeAITC',
                        width:'auto',
                        editable: true
                    },
                    {
                        title: '冻结USDI总量',
                        align: 'center',
                        key: 'freezeUSD'
                    }
                ],
                name: '',
                pageNum: 0,
                initPage: 1,
                pageSize: 10
            }
        },
        created: function () {
            this.load()
        },
        methods: {
            pageChange(index){
                this.initPage = index
                this.loading = true
                this.load ()
            },
            pageSizes(val){
                this.pageSize = val
                this.loading = true
                this.load(1)
            },
            load (index){
                let _this = this
                let params = new URLSearchParams()
                if(index == '1'){
                    _this.initPage = 1
                }
                params.append('page',_this.initPage)
                params.append('pageSize',_this.pageSize)
                if(!_this.name){
                    _this.name = 'user_id'
                }
                params.append('query',_this.name)
//                console.log(params)
                $http.post('/backgroundBuyOreLog/getBBcRank',params).then(function (res) {
                    if(res.suc){
                        console.log(res)
                        _this.Message = res.result.rows
                        _this.loading = false
                        _this.pageNum = res.result.total
                    }else{
                        _this.$Message.error(res.msg);
                    }
                })
            }
        }
    }
</script>
<style>
    .ivu-form-item {
        margin-bottom: 5px;
    }
</style>

